<template>
  <el-dialog class="public-dialog" title="添加商品" width="90vw" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <!-- <div class="grid grid-cols-4 mb-[16px]">
        <VText v-for="item in oldOrderColumn" :key="item.key" :title="item.label" :value="item.key" :line="1" />
      </div> -->
      <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="formData" :originOption="originOption" @submit="queryTableList"></XForm>

      <vxe-grid v-bind="tableOptions" ref="tableRef" />
    </div>

    <template #footer>
      <el-button @click="handleClose"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="submit"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { planSpaList, planSpaReview, planSpaDelete, planSpaUpdateRemark, planSpaUpdateTransportationType, stockingAnalysisList } from "@/api/plan"

import XForm from "@/components/XForm/index.vue"
const emit = defineEmits(["submit", "handleClose"])

const props = defineProps({
  originOption: { type: Object, default: () => {} },
  // modelValue: { type: Boolean, default: !false },
})

const modelValue = ref(false)
const data = reactive({
  // title: "详情",
  type: "add",
  formData: {
    skuRange: { type: "sku", value: "" },
  },
  loading: false,
  value1: [],
})
const { type, formData, value1, loading } = toRefs(data)

const tableRef = ref()
const activityColor = {
  新品: "text-green",
  重点: "text-red",
  // text-blue
}
const salesTagColor = {
  呆滞: "border-[#FAAD14] bg-[#FAAD14]",
  清库: "border-[#E50113] bg-[#E50113]",
  停售: "border-[#999] bg-[#999]",
}

const tableOptions = reactive({
  border: true,
  height: 600,
  showOverflow: false,
  // rowConfig: { height: 190 },

  columns: [
    { type: "checkbox", fixed: "left", width: 60 },

    {
      title: "产品信息",
      width: 200,
      slots: {
        // SKU销售状态 SKU货源状态
        default: ({ row }) => (
          <div>
            <div class="flex items-center w-[100%]">
              <div class="flex mr-[4px]">
                <div class={`status-tag dark mr-[2px] ${salesTagColor[row.sales_status_text] || "border-[#00AC76] bg-[#00AC76]"}`}>{row.sales_status_text}</div>
                <div class={`status-tag border-[1px] ${row.supply_status_text == "正常" ? "border-[#00AC76] text-[#00AC76]" : "border-[#999] text-[#999]"}`}>{row.supply_status_text}</div>
              </div>

              <div class="text-blue flex-1 w-[80px]">
                <VText title="SKU" value={row.sku} line={1} />
              </div>
            </div>

            <VText title="自定义" value={row.custom_sku} line={1} />
            <VText title="ASIN" value={row.asin} line={1} />
            <div class="flex items-center">
              <VText title="国家" value={row.site_code} line={1} />
              <VText title="活跃度" value={row.activity_status_text} line={1} class={activityColor[row.activity_status_text] || ""} />
            </div>
          </div>
        ),
      },
    },
    {
      title: "商品名称",
      width: 140,
      slots: {
        default: ({ row }) => <VText value={row.sku_title} line={3} />,
      },
    },

    {
      title: "需求数量",
      width: 140,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row.plan_stocking_analysis.stocking_status_text} line={1} />
            <VText title="数量" value={row.plan_stocking_analysis.stocking_quantity} line={1} />
            <VText title="备注" value={row.plan_stocking_analysis.stocking_remark} line={1} />
          </div>
        ),
      },
    },

    // {
    //   title: "基础LT天数",
    //   width: 180,
    //   slots: {
    //     default: ({ row }) => (
    //       <div>
    //         <div class="cursor-pointer text-[#3487ff]">{row.plan_lt_days.basic_lead_time}天</div>

    //         <VText title="采购天数" value={row.plan_lt_days.procurement_days ? row.plan_lt_days.procurement_days + "天" : ""} line={1} />
    //         <VText title="运输天数" value={row.plan_lt_days.transportation_days ? row.plan_lt_days.transportation_days + "天" : ""} line={1} />
    //         <VText title="安全天数" value={row.plan_lt_days.safety_days ? row.plan_lt_days.safety_days + "天" : ""} line={1} />

    //         <VText title="采购处理天数" value={row.plan_lt_days.procurement_processing_days ? row.plan_lt_days.procurement_processing_days + "天" : ""} line={1} />

    //         <VText title="本地仓处理天数" value={row.plan_lt_days.local_warehouse_processing_days ? row.plan_lt_days.local_warehouse_processing_days + "天" : ""} line={1} />
    //         <VText title="海外中转仓处理天" value={row.plan_lt_days.overseas_transit_warehouse_processing_days ? row.plan_lt_days.overseas_transit_warehouse_processing_days + "天" : ""} line={1} />
    //         <VText title="平台上架天数" value={row.plan_lt_days.platform_listing_days ? row.plan_lt_days.platform_listing_days + "天" : ""} line={1} />
    //       </div>
    //     ),
    //   },
    // },
    {
      title: "基础LT天数",
      width: 320,
      slots: {
        default: ({ row }) => (
          <div>
            <div class="flex items-center text-[#3487ff]">{row.plan_lt_days.basic_lead_time}天</div>
            <VText title="采购天数" value={String(row.plan_lt_days.procurement_days) ? row.plan_lt_days.procurement_days + "天" : ""} line={1} />
            <div class="flex">
              <VText title="运输天数" value={String(row.plan_lt_days.transportation_days) ? row.plan_lt_days.transportation_days + "天" : ""} line={1} />
              <VText title="安全天数" value={String(row.plan_lt_days.safety_days) ? row.plan_lt_days.safety_days + "天" : ""} line={1} />
            </div>

            <div class="flex">
              <VText title="采购处理天数" value={String(row.plan_lt_days.procurement_processing_days) ? row.plan_lt_days.procurement_processing_days + "天" : ""} line={1} />

              <VText title="本地仓处理天数" value={String(row.plan_lt_days.local_warehouse_processing_days) ? row.plan_lt_days.local_warehouse_processing_days + "天" : ""} line={1} />
            </div>

            <div class="flex">
              <VText
                title="海外中转仓处理天"
                value={String(row.plan_lt_days.overseas_transit_warehouse_processing_days) ? row.plan_lt_days.overseas_transit_warehouse_processing_days + "天" : ""}
                line={1}
              />
              <VText title="平台上架天数" value={String(row.plan_lt_days.platform_listing_days) ? row.plan_lt_days.platform_listing_days + "天" : ""} line={1} />
            </div>
          </div>
        ),
      },
    },

    // {
    //   title: "库存可售天数",
    //   width: 180,
    //   slots: {
    //     default: ({ row }) => (
    //       <div>
    //         <div>{row?.plan_stocking_inventory_availability?.overseas_warehouse_available_days} 天</div>
    //         <VText title="FBA可售" value={row?.plan_stocking_inventory_availability?.fba_sellable_days ? row?.plan_stocking_inventory_availability?.fba_sellable_days + "天" : ""} line={1} />
    //         <VText title="FBA在途" value={row?.plan_stocking_inventory_availability?.fba_in_transit_days ? row?.plan_stocking_inventory_availability?.fba_in_transit_days + "天" : ""} line={1} />
    //         <VText
    //           title="海外仓在途"
    //           value={row.plan_stocking_inventory_availability?.overseas_warehouse_in_transit_days ? row?.plan_inven?.tory_availability?.overseas_warehouse_in_transit_days + "天" : ""}
    //           line={1}
    //         />
    //         <VText
    //           title="海外仓可用"
    //           value={row?.plan_stocking_inventory_availability?.overseas_warehouse_available_days ? row?.plan_stocking_inventory_availability?.overseas_warehouse_available_days + "天" : ""}
    //           line={1}
    //         />
    //       </div>
    //     ),
    //   },
    // },
    {
      title: "库存可售天数",
      width: 180,
      slots: {
        default: ({ row }) => (
          <div>
            <div>{row.plan_stocking_inventory_availability?.overseas_warehouse_available_days} 天</div>
            <VText title="FBA可售" value={row.plan_stocking_inventory_availability?.fba_sellable_days ? row.plan_stocking_inventory_availability?.fba_sellable_days + "天" : ""} line={1} />
            <VText title="FBA在途" value={row.plan_stocking_inventory_availability.fba_in_transit_days ? row.plan_stocking_inventory_availability.fba_in_transit_days + "天" : ""} line={1} />
            <VText
              title="海外仓在途"
              value={row.plan_stocking_inventory_availability.overseas_warehouse_in_transit_days ? row.plan_stocking_inventory_availability.overseas_warehouse_in_transit_days + "天" : ""}
              line={1}
            />
            <VText
              title="海外仓可用"
              value={row.plan_stocking_inventory_availability.overseas_warehouse_available_days ? row.plan_stocking_inventory_availability.overseas_warehouse_available_days + "天" : ""}
              line={1}
            />
          </div>
        ),
      },
    },

    // {
    //   title: "库存信息",
    //   width: 240,
    //   slots: {
    //     default: ({ row }) => (
    //       <div>
    //         <VText title="FBA可用" value={row.plan_asin_inventory.fba_available} line={1} />
    //         <VText title="本地仓可用" value={row.plan_asin_inventory.local_warehouse_available} line={1} />
    //         <VText title="本地仓待发" value={row.plan_asin_inventory.local_warehouse_pending_shipment} line={1} />
    //         <VText title="海外仓可用" value={row.plan_asin_inventory.overseas_warehouse_available} line={1} />
    //         <VText title="采购在途" value={row.plan_asin_inventory.procurement_in_transit} line={1} />
    //         <VText title="FBA在途" value={row.plan_asin_inventory.fba_in_transit} line={1} />
    //         <VText title="海外仓在途" value={row.plan_asin_inventory.overseas_transit_in_transit} line={1} />
    //       </div>
    //     ),
    //   },
    // },
    // {
    //   title: "销量信息",
    //   width: 180,
    //   slots: {
    //     default: ({ row }) => (
    //       <div>
    //         <VText title="7天" value={row.asin_sales?.sales_num_seven_days} line={1} />
    //         <VText title="14天" value={row.asin_sales.sales_num_fourteen_days} line={1} />
    //         <VText title="30天" value={row.asin_sales.sales_num_thirty_days} line={1} />
    //         <VText title="90天" value={row.asin_sales.sales_num_ninety_days} line={1} />
    //       </div>
    //     ),
    //   },
    // },

    {
      title: "库存信息",
      width: 200,
      slots: {
        default: ({ row }) => (
          <div class="grid grid-cols-2 gap-x-2">
            <VText title="FBA可用" value={row.plan_asin_inventory.fba_available} line={1} />
            <VText title="本地仓可用" value={row.plan_asin_inventory.local_warehouse_available} line={1} />
            <VText title="本地仓待发" value={row.plan_asin_inventory.local_warehouse_pending_shipment} line={1} />
            <VText title="海外仓可用" value={row.plan_asin_inventory.overseas_warehouse_available} line={1} />
            <VText title="采购在途" value={row.plan_asin_inventory.procurement_in_transit} line={1} />
            <VText title="FBA在途" value={row.plan_asin_inventory.fba_in_transit} line={1} />
            <VText title="海外仓在途" value={row.plan_asin_inventory.overseas_transit_in_transit} line={1} />
          </div>
        ),
      },
    },

    {
      title: "销量信息",
      width: 180,
      slots: {
        header: ({}) => (
          <div>
            <span class="text-blue">7</span>/<span class="text-blue">14</span>/<span class="text-blue">30</span>/<span class="text-blue">90</span>天销量
          </div>
        ),
        default: ({ row }) => (
          <div class="grid grid-cols-2 gap-x-2">
            <VText title="7天" value={row.asin_sales?.[0]?.sales_num_seven_days} line={1} onClick={() => console.log(row)} />
            <VText title="14天" value={row.asin_sales?.[0]?.sales_num_fourteen_days} line={1} />
            <VText title="30天" value={row.asin_sales?.[0]?.sales_num_thirty_days} line={1} />
            <VText title="90天" value={row.asin_sales?.[0]?.sales_num_ninety_days} line={1} />
          </div>
        ),
      },
    },

    {
      title: "预估日均销量",
      width: 180,
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="系统" value={row.system_average_daily_sales} line={1} type="link" />
            <VText title="运营" value={row.operation_average_daily_sales} line={1} type="link" />
          </div>
        ),
      },
    },
    {
      title: "运输类型",
      width: 180,
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="类型" value={row.transportation_type_text} line={1} />
            <VText title="运输天数" value={row.plan_lt_days.transportation_days} line={1} />
            <VText title="最近FBA到货" value={row?.fba_received_quantity} line={1} />
            <VText title="到货时间" value={row?.fba_received_at} line={1} />
          </div>
        ),
      },
    },
    {
      title: "人员信息",
      width: 200,
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="计划" value={row.planner_user_text} line={1} />
            <VText title="采购" value={row.purchaser_user_text} line={1} />
            <VText title="运营" value={row.operator_user_text} line={1} />
            <VText title="部门" value={row.department_name} line={2} />
          </div>
        ),
      },
    },
  ],
  // data: [],
  pagerConfig: {
    // enabled: true,
    // pageSize: 10
  },
  proxyConfig: {
    // autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },

    ajax: {
      query: ({ page }) => {
        let params = {
          ...formData.value,
          page: page.pageNum,
          page_size: page.pageSize,
        }
        params[params.skuRange.type] = params.skuRange.value
        return stockingAnalysisList(params)
      },
    },
  },
})
// const queryList = () => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       resolve({
//         data: [{ fee_type_text: "34234234324234324234523dfghfdhdfshsdgsdsdfgsdg", xxx: "99", name: "aaa" }],
//         total: 20,
//       })
//     }, 500)
//   })
// }
const queryTableList = () => {
  tableRef.value.commitProxy("reload")
}
// const originOption = ref({
//   platform: [
//     { label: "审核通过", value: "sku" },
//     { label: "已驳回", value: "custom_sku" },
//   ],
// })
const formOption = ref({
  inline: true,
  option: true,
})
const fieldList = ref([
  {
    field: "site_id",
    type: "select",
    originField: "amazonSite",
    options: { placeholder: "国家" },
    multiple: true,
    collapseTags: true,
    style: { width: "120px" },
  },

  {
    field: "skuRange",
    placeholder: "可批量搜索",
    select: [
      { label: "SKU", value: "sku" },
      { label: "自定义SKU", value: "custom_sku" },
      { label: "ASIN", value: "asin" },
    ],
    style: { width: "200px" },
  },

  {
    field: "is_prepared_goods",
    type: "select",
    originField: "Base.BaseAsinList.IsRequiresStockingEnum",
    options: {
      placeholder: "是否需要备货",
    },
    style: { width: "120px" },
  },

  {
    field: "operator_user",
    type: "cascader",
    placeholder: "运营负责人",
    multiple: true,
    collapseTags: true,
    selectStyle: { width: "120px" },
  },
])
const submit = () => {
  let checkboxRecords = tableRef.value.getCheckboxRecords()
  if (!checkboxRecords) {
    return ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
  }
  // let keys = [
  //   ["plan_asin_inventory", "spa_inventory"],
  //   ["plan_asin_purchases", "spa_purchases"],
  //   ["plan_stocking_inventory_availability", "spa_inventory_availability"],
  //   ["plan_lt_days", "spa_lt_days"],
  //   ["plan_stocking_analysis", "spa_analysis"],
  //   ["asin_sales", "spa_sales"],
  // ]
  // plan_asin_inventory  plan_asin_purchases plan_stocking_inventory_availability plan_lt_days plan_stocking_analysis  asin_sales

  //   spa_inventory spa_purchases spa_inventory_availability spa_lt_days
  //    spa_analysis  spa_sales
  // checkboxRecords = JSON.parse(JSON.stringify(checkboxRecords))
  // checkboxRecords.forEach((item) => {
  //   keys.forEach((key) => {
  //     item[key[1]] = item[key[0]]
  //     delete item[key[0]]
  //   })
  //   console.log(1122)
  //   console.log(item)
  // })

  // console.log(checkboxRecords)
  emit("submit", checkboxRecords)
  handleClose()
}
const handleClose = () => {
  modelValue.value = false
  // form?.value.resetForm()
}
const open = (params = {}) => {
  modelValue.value = true
  // setTimeout(() => {
  //   initEcharts()
  // }, 1000)
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.form-box {
  border: 1px solid #eff3fe;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
:deep(.status-tag) {
  width: 30px;
  height: 14px;
  line-height: 12px;
  text-align: center;
  border-radius: 2px;
  font-size: 10px;
  &.dark {
    color: #fff;
    line-height: 14px;
  }
}
</style>
